<div class="wind-energy-map" fxLayout="row" #map>
  <table class="farm-data" cellspacing="0" cellpadding=0>
    <thead>
    <tr>
      <th>风场</th>
      <th>风向</th>
      <th>温度(℃)</th>
      <th>风速(m/s)</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of farms;let i=index">
      <td>{{item?.farmName}}</td>
      <td>
        <div class="windDirec" [ngStyle]="{transform: 'rotate('+(item?.windDirectionReal?.value+90)+'deg)'}">
        </div>
      </td>
      <td>
        {{item?.temperatureReal?.value | number:'1.1-2'}}
      </td>
      <td>
        {{item?.windSpeedReal?.value | number:'1.1-2'}}
      </td>
    </tr>
    </tbody>
  </table>
  <div class="map-content">
    <!--<div *ngIf="isShowImg">-->
    <!--<div class="monitor-image" style="background: url('./assets/images/Monitor_Center.png') no-repeat center center;" [ngStyle]="{'top': mCenterX + '%' , 'left': mCenterY + '%'}"></div>-->
    <!--</div>-->
    <section class="map-item" [ngClass]="{active: active===null}" (click)="onHeaderClick(null,null)">
      <app-farm-model
        [ngStyle]='{zoom:zoom}'
        [farmName]="centerName"
        [farmX]="offsetX+mCenterX-5"
        [farmY]="offsetY+mCenterY+12"
        [unShowName]="false"
        [active]="true"
        [i]="-1"
        [ngClass]="{'on':true}">
      </app-farm-model>
    </section>
    <section class="map-item" [ngClass]="{active: active===i}" *ngFor="let item of farms;let i=index" (click)="onHeaderClick(item,i)">
      <app-farm-model
        [ngStyle]='{zoom:zoom}'
        [farmName]="item?.farmName"
        [farmX]="item?.posx + offsetX"
        [farmY]="item?.posy + offsetY"
        [windSpeed]="item?.windSpeedReal?.value"
        [unShowName]="item?.unShowName"
        [active]="active"
        [i]="i"
        [ngClass]="{'on':i == active}">
      </app-farm-model>
      <!-- <header>{{item?.farmName}}</header> -->
      <!--  <section class="map-item-bottom" fxLayout="row">
        <aside fxFlex="30%">
          <div [ngStyle]="{transform: 'rotate('+(item?.windDirectionReal?.value+90)+'deg)'}">

          </div>
        </aside>
        <section fxFlex="70%">
          {{item?.temperatureReal?.value | number:'1.1-2'}}℃
          <br> {{item?.windSpeedReal?.value | number:'1.1-2'}}m/s
        </section>
      </section> -->
    </section>
  </div>

</div>
